<template>
  <div class="site-detail-container">
    <!-- head-user -->
    <div class="user-head-block d-flex ai-center py-6 px-7">
      <img src="/static/images/page/test.png" class="avatar mr-5">
      <div class="info-block fs-sm">
        <p class="name fwb">Elise Beverley</p>
        <p class="date fs-sm">2019/1/12</p>
      </div>
    </div>
    <!-- swiper -->
    <image-swiper />
    <!-- main -->
    <div class="main-block px-7">
      <div class="site-info d-flex ai-center">
        <img src="/static/images/page/site.png" class="site-i mr-3">
        <p class="city fs-xl fwb mr-3">北京</p>
        <div class="site">故宫</div>
      </div>
      <div class="pt-3">北京故宫是中国明清两代的皇家宫殿，旧称为紫禁城，位于北京中轴线的中心，是中国古代宫廷建筑之精华。</div>
      <div class="tags-block">
        <div class="tag-item mb-7">可以无障碍进出景区(12)</div>
      </div>
    </div>
    <!-- discuss -->
    <div class="discuss-container px-7">
      <p class="fs-xl fwb">回复</p>
      <discuss-bar />
      <a href="/pages/moreDiscuss" class="py-7 text-center text-green">查看全部 25 条回复</a>
    </div>
    <!-- recommend -->
    <recommend />
    <!-- bottom-handle -->
    <div class="bottom-handle-block bg-white d-flex ai-center pl-7  pr-3 py-6">
      <a href="/pages/writeDiscuss">
        <input disabled type="text" placeholder="快来留下你的回复吧" class="discuss-input bg-light px-6 w-100 h-100">
      </a>
      <div class="collect-btn d-flex ai-center px-5 py-2">
        <img src="/static/images/page/collect-empty.png" class="collect-i mr-3">
        <span class="num text-info">385</span>
      </div>
      <button class="share-btn px-5 py-2"><img src="/static/images/page/collect-empty.png" class="share-i"></button>
    </div>
  </div>
</template>
<script>
import ImageSwiper from './components/ImageSwiper'
import DiscussBar from '@/components/Discuss'
import Recommend from './components/Recommend'
export default {
  components: { ImageSwiper, DiscussBar, Recommend },
  data() {
    return {
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.site-detail-container {
  padding-bottom: 110rpx;
  .user-head-block {
    .avatar {
      @include wh(60rpx, 60rpx);
      border-radius: 50%;
    }
  }
  .main-block {
    padding-top: 37rpx;
    .site-info {
      .site-i {
        @include wh(20rpx, 28rpx);
      }
      .site {
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 16rpx;
        border: 1rpx solid $green-light-border;
        border-radius: 30rpx;
      }
    }
    .tags-block {
      padding-top: 36rpx;
      .tag-item {
        display: inline-block;
        height: 50rpx;
        line-height: 50rpx;
        padding: 0 20rpx;
        border: 1rpx solid $green-light-border;
        border-radius: 30rpx;
      }
    }
  }
  .discuss-container {
    padding-top: 18rpx;
  }
  .bottom-handle-block {
    position: fixed;
    bottom: 0;
    left: 0;
    @include wh(100vw, 110rpx);
    box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
    .discuss-input {
      width: 500rpx;
      border-radius: 30rpx;
    }
    .collect-btn {
      margin-left: 20rpx;
      .collect-i {
        @include wh(30rpx, 30rpx);
      }
      .num {
        font-size: 26rpx;
      }
    }
    .share-btn {
      .share-i {
        @include wh(30rpx, 30rpx);
      }
    }
  }
}
</style>